// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';

/* -------------------------------------------------------------------------- */
// Custom container width

.t-medium .mzp-l-content {
    @include text-body-lg;
    max-width: $content-xl;
}

/* -------------------------------------------------------------------------- */
// Sections & headings

.moss-section-heading {
    @include text-title-md;
    margin-bottom: $spacing-xl;

    @media #{$mq-md} {
        text-align: center;
    }
}

.moss-section-subhead {
    @include text-title-sm;

    @media #{$mq-md} {
        text-align: center;
    }
}

.moss-section-lead-in {
    margin-top: $layout-lg;
}

.moss-section {
    border-top: 4px solid $color-marketing-gray-20;
    margin-top: $layout-lg;
    padding-top: $spacing-xl;
}

.moss-cta {
    text-align: center;
}

/* -------------------------------------------------------------------------- */
// Page header

.moss-masthead {
    background: $color-red-70;
    color: $color-white;

    .header-image {
        @include background-size(90%);
        background-color: $color-white;
        background-position: center;
        background-repeat: no-repeat;
        height: 200px;
    }

    .page-heading {
        @include text-title-md;
        color: $color-white;
        margin-bottom: 0;
        text-align: center;
    }

    @media #{$mq-md} {
        .header-image {
            height: 260px;
        }
    }

    @media #{$mq-lg} {
        .header-image {
            height: 360px;
        }
    }
}

// index page
#moss-home .header-image {
    display: none;
}

// foundational technology
#moss-foundational-technology .header-image {
    background-image: url('/media/img/mozorg/moss/header-foundational-technology.svg');
}

// mission partners
#moss-mission-partners .header-image {
    background-image: url('/media/img/mozorg/moss/header-mission-partners.svg');
}

// secure open source
#moss-secure-open-source .header-image {
    background-image: url('/media/img/mozorg/moss/header-secure-open-source.svg');
}

/* -------------------------------------------------------------------------- */
// Cards

.mzp-c-card .mzp-c-card-media-wrapper {
    background-color: transparent;
}

/* -------------------------------------------------------------------------- */
// Picto cards

// Vertically align buttons in moss tracks lists.
@supports (display: flex) {
    @media #{$mq-md} {
        .moss-tracks-list {
            display: flex;

            .mzp-c-picto {
                align-items: stretch;
                display: flex;
                flex-direction: column;
                flex: 1;
            }

            .mzp-c-picto-heading {
                flex-grow: 1;
            }

            .mzp-c-picto-body {
                display: flex;
                flex-direction: column;
                flex-grow: 2;
                justify-content: space-between;
            }
        }
    }
}

/* -------------------------------------------------------------------------- */
// Custom list layouts

.moss-list.moss-list-third {
    @media #{$mq-lg} {
        @include clearfix;
        margin: $spacing-2xl 0;

        li {
            @include grid-third;
            @include bidi(((float, left, right),));
            padding: 0 $spacing-md;
        }
    }
}

.moss-list.moss-list-half {
    li img {
        display: block;
        margin: 0 auto $spacing-lg;
    }

    @media #{$mq-lg} {
        @include clearfix;
        margin: $spacing-2xl 0;

        li {
            @include grid-half;
            @include bidi(((float, left, right),));
            padding: 0 $spacing-md;
        }
    }
}
